<!-- -------- 员工防伪 --------- -->
<template>
  <headerView></headerView>
  <div class="antiFake">
    <video
      autoplay="autoplay"
      loop="loop"
      muted
      class="video-home"
      ref="videoRef"
      src="http://www.wanwutong.com/home-video1.mp4"
    ></video>
    <div class="box">
      <h2>万物通员工防伪查询</h2>
      <div class="input">
        <input
          type="text"
          placeholder="请输入员工姓名/手机号"
          v-model="inputData"
        />
        <span class="btn" @click="inputFn">查询</span>
      </div>
      <div class="result" v-show="isresult">
        <h3>{{ dataRes }}</h3>
        <p>1、姓名或手机号不正确，请检查后重试</p>
        <p>2、谨防诈骗，如有问题请及时联系：0551-65629558</p>
      </div>
      <div class="resultTow" v-show="isresultTow">
        <h3>验证通过</h3>
        <p>1、姓名或手机号正确， {{ inputData }} 是万物通员工</p>
        <p>2、谨防诈骗，如有问题请及时联系：0551-65629558</p>
      </div>
    </div>
    <div class="verify" v-show="isVerify">
      <div class="shift">
        <!-- <h2>防伪校验</h2> -->
        <SliderCaptcha1 @fangweiFn="fn" @phone="phoneFn" />
      </div>
    </div>
    <div class="verify-text" v-show="isVerifyText">
      <p>请输入万物通员工姓名/手机号</p>
    </div>
  </div>
  <bottomView></bottomView>
</template>
<script setup>
import axios from "axios";
import SliderCaptcha1 from "@/components/SliderCaptcha1.vue";
import { ref, onMounted } from "vue";
const isVerify = ref(false);
const isVerifyText = ref(false);
const inputData = ref("");
const dataRes = ref("");
const props = defineProps({
  phone: Number,
});
const inputFn = () => {
  isresult.value = false;
  isresultTow.value = false;
  if (inputData.value != "") {
    isVerify.value = true;
    isVerifyText.value = false;
  } else {
    isVerifyText.value = !isVerifyText.value;
  }
};
const isresult = ref(false);
const isresultTow = ref(false);

function fn(a) {
  isVerify.value = false;
  console.log(a);
  axios
    .post("https://scm.wwtscm.com/api/index/Gwantifake", {
      name: inputData.value,
      phone: a.userPhoto,
    })
    .then((res) => {
      if (res.data.code == 1) {
        isresult.value = false;
        isresultTow.value = true;
      } else if (res.data.code == 0) {
        dataRes.value = res.data.msg;
        isresult.value = true;
        isresultTow.value = false;
      }
    });
}

onMounted(() => {});
</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

.antiFake {
  width: 100%;
  height: 90vh;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  z-index: 1;

  .video-home {
    position: absolute;
    // width: 100%;
    height: 150%;
    z-index: -1;
  }

  .box {
    width: 50vw;
    margin-top: 10vw;

    h2 {
      color: #fff;
      font-weight: 700;
      text-align: center;
      font-size: $title-font-size1;
      margin-bottom: 3vw;
    }

    .input {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 0.5vw;
      background-color: rgba(245, 245, 245, 0.3);
      border: solid 0.2vw rgba(0, 0, 0, 0.2);
      border-radius: 0.5vw;

      input {
        width: 60vw;
        height: 3.5vw;
        background-color: transparent;
        border-radius: 0.5vw;
        border: none;
        font-size: $title-font-size3;
        padding: 0 1vw;

        &::placeholder {
          color: #fff;
          font-size: $title-font-size3;
        }

        &:focus {
          outline: none;
          box-shadow: none;
          border: none;
        }
      }

      .img {
        height: 2vw;
      }

      .btn {
        width: 8vw;
        height: 2.8vw;
        background-color: $firm-color;
        text-align: center;
        line-height: 2.8vw;
        border-radius: 0.5vw;
        color: #fff;
        font-size: $title-font-size4;
      }
    }

    .result {
      width: 50vw;
      color: red;
      text-align: center;
      background-color: rgba(245, 245, 245, 0.6);
      border-radius: 0.5vw;
      margin-top: 1vw;

      h3 {
        font-size: $title-font-size4;
      }

      p {
        font-size: $title-font-size5;
        color: #686868;
      }
    }

    .resultTow {
      width: 50vw;
      text-align: center;
      background-color: rgba(245, 245, 245, 0.6);
      border-radius: 0.5vw;
      margin-top: 1vw;

      h3 {
        font-size: $title-font-size1;
        color: #000;
      }
    }
  }

  .verify {
    width: 100vw;
    height: 100%;
    position: absolute;
    z-index: 12;

    .shift {
      //   width: 20vw;
      //   height: 16vw;
      padding: 0.5vw;
      border-radius: 0.5vw;
        position: absolute;
        right: 30%;
        top: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
  }

  .verify-text {
    position: absolute;
    font-size: 1vw;
    color: #fff;
    padding: 0.2vw;
    background-color: rgba($color: #000000, $alpha: 0.6);
    top: 51%;
  }
}

@media screen and (max-width:1000px) {
    .verify {
    width: 100vw;
    height: 100%;
    position: absolute;
    z-index: 12;

    .shift {
        right: 15% !important;
    }
  }
}
</style>
